<template>
    <div class="banner animate bounceIn">
      <div class="bg-1">
        <div class="line-1"></div>
        <ul>
          <li>
            <div>8.1-9.15</div>
            <div>网申</div>
          </li>
          <li>
            <div>8.1-9.12</div>
            <div>提前批</div>
          </li>
          <li>
            <div>详见通知动态</div>
            <div>在线笔试</div>
          </li>
          <li>
            <div>9.26</div>
            <div>常规批</div>
          </li>
        </ul>
      </div>
      <div class="bg-2">
        <img src="~img/1/process_circle.png" alt />
      </div>

      <div class="btns">
        <a href="javascript:;">投递简历</a>
        <a href="javascript:;">流程F&Q</a>
      </div>
    </div>
</template>

<script>
export default {
  name: "BannerOne"
};
</script>

<style scoped>
.banner {
  position: relative;
  height: 70%;
  width: 100%;
  position: absolute;
  top:15%;
  

  /* top: 50%;transform: translateY(-50%); */

  background: /* url("~img/1/process_circle.png") no-repeat 61% 62.5%/2%, */ url("~img/1/slogan0723.png")
      no-repeat 50% 37%/28%,
    url("~img/1/home_main.png") no-repeat 50% 50%/26.5%;
}
.banner > .bg-1 {
  /* background: red; */
  position: relative;
  width: 60%;
  height: 20%;
  position: absolute;
  top: 64%;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg) skew(-10deg);
}
.banner > .bg-1 > .line-1 {
  margin: 0 10%;
  width: 80%;
  height: 5px;
  background: -webkit-linear-gradient(top left, transparent, rgb(255, 242, 0));
  background: -webkit-linear-gradient(
    top left,
    transparent,
    rgb(255, 242, 0) 71%,
    rgba(255, 255, 255, 0.3) 20%,
    transparent
  );
}

.banner > .bg-1 > ul {
  display: flex;
  justify-content: center;
  margin-top: 2%;
}
.banner > .bg-1 > ul > li {
  width: 12%;
  text-align: center;
  font-size: 1.8rem;
  color: white;
}
.banner > .bg-1 > ul > li:last-of-type {
  color: rgb(255, 242, 0);
}
.banner > .bg-2 {
  width: 2%;
  position: absolute;
  top: 58.5%;
  right: 38.5%;
}
.banner > .bg-2 img {
  width: 100%;
  height: 100%;
}
.banner > .btns {
  width: 100%;
  height: 56px;
  position: absolute;
  top: 93%;
  display: flex;
  justify-content: center;
}
.banner > .btns > a {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 28px;
  float: left;
  width: 168px;
  height: 56px;
  font-size: 2rem;
  margin: 0 20px;
}
.banner > .btns > a:nth-of-type(1) {
  background: #fff200;
  color: #0765c8;
}
.banner > .btns > a:nth-of-type(2) {
  border: 1px solid #fff;
  color: #fff;
}
.banner > .btns > a:nth-of-type(1):hover {
background-color: #efe300;
}
.banner > .btns > a:nth-of-type(2):hover {
  background: rgba(255, 255, 255, 0.1)
}
</style>